<template>
    <v-container class="mt-4">
         <v-container>
            <h4 class="mb-3">城市管理</h4>
        </v-container>
        <v-container>
            <v-btn
                dark
                class="mb-2 mr-2"
                @click="addSubOrg()"
            >添加城市
            </v-btn>
        </v-container>
        <v-treeview
            item-key="id"
            item-text="name"
            :items="tree"
            activatable
        >
            <template v-slot:prepend>
                <v-icon>mdi-domain</v-icon>
            </template>

            <template v-slot:label="{ item, open, active }">
                <span>{{item.name}}</span>
            </template>
        </v-treeview>

         <v-dialog
            v-model="dialog"
            persistent
            max-width="400px"
        >
            <v-form ref="form">
                <v-card>
                    <v-card-title>
                        <span class="text-h5">新增城市</span>
                    </v-card-title>
                    <v-card-text>
                    <v-row>
                        <v-col cols="12">
                            <v-text-field
                                label="省份：列四川"
                                v-model="orgProvinceName"
                            ></v-text-field>
                        </v-col>
                        <v-col cols="12" >
                            <v-text-field
                                label="城市：例成都"
                                v-model="orgCityName"
                            ></v-text-field>
                        </v-col>
                    </v-row>

                    </v-card-text>
                    <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn  depressed   @click="dialog = false" :disabled="saving">
                        关闭
                    </v-btn>
                    <v-btn   depressed  color="primary" dark  @click="save()" :loading="saving">
                        确定
                    </v-btn>
                    </v-card-actions>
                </v-card>
            </v-form>
        </v-dialog>

          <v-navigation-drawer

      permanent
      right
    >

    </v-navigation-drawer>

    </v-container>
</template>

<script>
    import axios from "axios";

    export default {
    data: () => ({
        dialog: false,
        orgProvinceName: '',
        orgCityName: '',

        tree: [],
        saving: false
    }),


    created() {
        this.loadTree()
    },

    methods: {
            addSubOrg() {
                this.dialog = true;
                this.orgProvinceName = '';
                this.orgCityName = '';
            },
            save() {

                if(!this.orgProvinceName || !this.orgProvinceName ){
                    this.$toast.open({
                        message: '省份,城市不能为空',
                        type: 'error',
                        position: 'top-right',
                    });
                }

                let url = '/website/tree';
                const that = this;
                that.saving = true;
                axios.post(url, {
                    province_name: this.orgProvinceName,
                    city_name: this.orgCityName,
                }).then((response) => {
                    if (response.data.code == 0) {
                        that.loadTree();
                        that.dialog = false;
                        this.$toast.open({
                            message: '添加成功',
                            type: 'success',
                            position: 'top-right',
                        });
                    } else {
                        this.$toast.open({
                            message: response.data.msg,
                            type: 'error',
                            position: 'top-right',
                        });
                    }
                }).catch(function () {})
                    .then(function () {
                        that.saving = false;
                    });
            },
            loadTree() {
                axios.get(`/website/tree`).then((response) => {
                    this.tree = response.data.data.tree;
                })
                .catch(function () {})
                .then(function () {});
            },
        },
    };
</script>
